<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>地图显示</title>
  <!-- 原生的openlayers+mapgis接口 -->
  <script src="../OL_SDK/OL_SDK/include-openlayers-local.js"></script>

</head>

<body>
  <div id="map"></div>
  <script>

    const gaode_vector = new ol.layer.Tile({
      title: "高德地图",
      source: new ol.source.XYZ({
        url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
        wrapX: false
      })
    });

    //调用中地接口获取mapgis服务数据
    const layer = new Zondy.Map.Doc('', 'point_and_line', {
      // ip: 'localhost',
      // port: 6163   ip和port可以不写
    })

    const map = new ol.Map({
      target: "map",//相当于vue2的el,将实例地图设置到dom上
      layers: [gaode_vector, layer],
      view: new ol.View({
        center: [114, 30],
        zoom: 4,
        projection: "EPSG:4326"
      })
    })
  </script>
</body>

</html>